<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="h2 w100pc"></view>
		<view class="bra10 lrmg-30 fsb" style="background: #fff;box-shadow: 0px 0px 2rpx 2rpx rgba(0, 0, 0, 0.1);padding: 20rpx;">
			<view class="flex aic">
				<image :src="OrderInfo.user_avatar" style="width:90rpx;height:90rpx" class="bra50"></image>
				<view class="f30 bold400 mg-l-10" style="color: #323232;">{{OrderInfo.user_nickname}}</view>
			</view>
			<view class="f26 bold400" style="color: #AFAFAF;">{{OrderInfo.time_str}}</view>
		</view>
		<view class="h2 w100pc"></view>
		<view class="bra10 lrmg-30" style="background: #fff;box-shadow: 0px 0px 2rpx 2rpx rgba(0, 0, 0, 0.1);padding: 20rpx;">
			<view class="fsb">
				<view class="f36" style="color: #323232;font-weight: 600;">{{OrderInfo.consultation_type == 1 ? '图文问诊' : '电话问诊'}}</view>
				<view class="f32 bold500" style="color: #FF8F2B;">¥{{OrderInfo.discount_price}}</view>
			</view>
			<view class="mg-t-30 flex aic">
				<view class="f32 bold400" style="color: #909090;width: 170rpx;">宠物信息</view>
				<view class="f30 bold400" style="color: #323232;width: calc(100% - 170rpx);">{{OrderInfo.petfiles_race == 0 ? '其他' : (OrderInfo.petfiles_race == 1 ? '猫' : '狗')}} {{OrderInfo.petfiles_sex == 0 ? '母' : '公'}} {{OrderInfo.petfiles_age}}</view>
			</view>
			<view class="mg-t-30 flex">
				<view class="f32 bold400" style="color: #909090;width: 170rpx;">症状描述</view>
				<view class="f30 bold400" style="color: #323232;width: calc(100% - 170rpx);line-height: 45rpx;">{{OrderInfo.describe}}</view>
			</view>
		</view>
		<view class="h2 w100pc"></view>
		<view class="bra10 lrmg-30" style="background: #fff;box-shadow: 0px 0px 2rpx 2rpx rgba(0, 0, 0, 0.1);padding: 20rpx;">
			<view class="f32" style="color: #323232;font-weight: 500;">订单信息</view>
			<view class="mg-t-30 flex aic">
				<view class="bold400" style="color: #909090;">订单编号：</view>
				<view class="bold400" style="color: #323232;">{{OrderInfo.order_id}}</view>
			</view>
			<view class="mg-t-30 flex aic">
				<view class="bold400" style="color: #909090;">订单时间：</view>
				<view class="bold400" style="color: #323232;">{{OrderInfo.en_time}}</view>
			</view>
		</view>
		<view class="fsa" style="position: absolute;z-index: 99;bottom: 0;left: 0;width: 100%;height: 400rpx;">
			<view class="" style="width: 180rpx;height: 80rpx;"></view>
			<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/mykehu/qd.png" style="width:150rpx;height:150rpx" class="" @click="submit(OrderInfo.order_id)"></image>
			<view class="bra20" style="width: 180rpx;height: 80rpx;line-height: 80rpx;background: #fff;box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.12);color: #323232;text-align: center;" @click="qiangdan()">下一单</view>
		</view>
		<view class="w100pc" style="height: 400rpx;"></view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data(){
			return{
				title: '抢单中心',
				OrderInfo:{}
			}
		},
		onLoad() {
			that = this
			that.qiangdan()
		},
		methods:{
			qiangdan(){
				uni.showLoading({
					mask: true,
					title: '请等待...'
				});
				that.$postAjax1('Doc_QianDan_getOrderInfo','',function(data){
					console.log(data,555);
					uni.hideLoading()
					that.OrderInfo = data.data.data
					if(that.OrderInfo == ''){
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			submit(id){
				uni.showLoading({
					mask: true,
					title: '正在抢单...'
				});
				let postData = {
					order_sn:id
				}
				that.$postAjax1('Doc_QianDan_grabbingOrders',postData,function(data){
					uni.hideLoading()
					if(data.data.code == 1){
						that.qiangdan()
					}else if(data.data.code == 50005){
						uni.showToast({
							icon:'none',
							title:data.data.msg 
						})
						that.qiangdan()
					}
				})
			},
		}
	}
</script>

<style>
</style>
